<template>
  <van-tree-select
    v-model:main-active-index="activeIndex"
    height="150vw"
    :items="list"
  >
    <template #content>
      <div
        v-show="activeIndex === index"
        class="bananer"
        v-for="(item, index) in list"
      >
        <div><img src="../../assets/images/banner.png" alt="" /></div>
        <div class="wenzi">--- 推荐专区分类 ---</div>
        <div class="shangpin">
          <div class="shangpin-item" v-for="child in item.children">
            <router-link :to="'/detaList?id=' + child._id"
              ><img :src="child.icon" alt=""
            /></router-link>
            <div>{{ child.name }}</div>
          </div>
        </div>
      </div>
    </template>
  </van-tree-select>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getCategory } from "@/api/index";
const router = useRouter();
let list = ref([]);
const activeIndex = ref(0);
const go = () => {
  router.push({
    name: "detaList",
  });
};
getCategory().then((res) => {
  console.log(res);
  if (res.code == 0) {
    list.value = res.category.map((item) => {
      item.text = item.name;
      item.id = item._id;
      return item;
    });
    console.log(list.value);
  }
});
</script>
<style>
.van-sidebar-item {
  width: 80px;
}
#app .van-tree-select__nav {
  width: 80px;
}
.ringht {
  text-align: center;
}

.shangpin {
  display: flex;
  text-align: center;
}
.shangpin-item img {
  width: 80px;
}
</style>
